import {
  FcCheckBox,
  FcCheckboxProps,
  FcFormItem,
  FcFormItemLayout,
  FcFormItemLayoutConfig,
  TextBox,
} from "solid-fire-controls";
import { Component } from "solid-js";

export interface RoleDetailProps {
  layout?: FcFormItemLayoutConfig;
}

const RoleDetail: Component<RoleDetailProps> = (props) => {
  return (
    <FcFormItemLayout classList={["mb-3"]} {...props.layout}>
      <FcFormItem
        name={"id"}
        label={"Id"}
        control={TextBox}
        onControlValueChanged={{
          eventName: "onChange",
          generateHandler: (setter) => (v) => setter?.(v),
        }}
      ></FcFormItem>
      <FcFormItem
        name="name"
        label="Name"
        control={TextBox}
        onControlValueChanged={{
          eventName: "onChange",
          generateHandler: (setter) => (v) => setter?.(v),
        }}
      ></FcFormItem>
      <FcFormItem
        name="createdTime"
        label="Created"
        control={TextBox}
        onControlValueChanged={{
          eventName: "onChange",
          generateHandler: (setter) => (v) => setter?.(v),
        }}
      ></FcFormItem>
      <FcFormItem
        name="lastModifiedTime"
        label="Last Modified"
        control={TextBox}
        onControlValueChanged={{
          eventName: "onChange",
          generateHandler: (setter) => (v) => setter?.(v),
        }}
      ></FcFormItem>
      <FcFormItem
        name="deleted"
        label="Deleted"
        control={(ctx: FcCheckboxProps) => (
          <div class="d-flex flex-row align-items-center form-switch">
            <FcCheckBox {...ctx}></FcCheckBox>
          </div>
        )}
      ></FcFormItem>
    </FcFormItemLayout>
  );
};

export default RoleDetail;
